<template>
  <div class="add-card-container">
    <!-- 页面头部 -->
    <div class="header">
      <el-page-header @back="$router.back()" :content= 'id ? "编辑月卡": "新增月卡" 'title="返回">
      </el-page-header>
    </div>

    <div class="latest-payment">
      <h3>车辆信息</h3>
      <el-form
        :model="form"
        label-width="120px"
        class="form-container"
        :rules="carInfoRules"
        ref="formRef"
      >
        <!-- 第一列 -->
        <div class="form-row">
          <el-form-item label="车牌号码" prop="carNumber">
            <el-input
              v-model="form.carNumber"
              placeholder="请输入车牌号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="车主姓名" prop="personName">
            <el-input
              v-model="form.personName"
              placeholder="请输入车主姓名"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 第二列 -->
        <div class="form-row">
          <el-form-item label="联系电话" prop="phoneNumber">
            <el-input
              v-model="form.phoneNumber"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="车辆品牌" prop="carBrand">
            <el-input
              v-model="form.carBrand"
              placeholder="请输入车辆品牌"
            ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input
              v-model="form.paymentAmount"
              placeholder="请输入金额"
            ></el-input>
          </el-form-item>
          <el-form-item label=""> </el-form-item>
        </div>

        <!-- 第四列 -->
        <div class="form-row">
          <el-form-item label="有效日期开始" prop="cardStartDate">
            <el-date-picker
              v-model="form.cardStartDate"
              type="date"
              placeholder="选择有效日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="有效日期结束" prop="cardEndDate">
            <el-date-picker
              v-model="form.cardEndDate"
              type="date"
              placeholder="选择结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </div>
        <!-- 第五列 -->
        <div class="form-row">
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="form.paymentMethod" placeholder="请选择方式">
              <el-option
                v-for="item in payMethodList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 提交与重置按钮 -->
        <div class="form-actions">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>

    <!-- 最新缴费信息 -->
    <div class="latest-payment">
      <h3>最新月卡缴费信息</h3>
      <div class="payment-details">
        <p><strong>有效日期：</strong></p>
        <p><strong>支付金额：</strong></p>
        <p><strong>支付方式：</strong></p>
      </div>
    </div>
  </div>
</template>

<script>
import { createCardAPI, getDetailAPI, updateCardAPI } from "@/api/card";
export default {
  data() {
    const validatearNumber = (rule, value, callback) => {
      const carNumberRegex =
        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z][A-Z][A-Z0-9]{4,5}(?:[D|F][0-9]{1,5})?$/;
      if (!carNumberRegex.test(value)) {
        callback(new Error("请输入符合规范得车牌号码"));
      } else {
        callback();
      }
    };
    return {
      form: {
        personName: "", // 车主姓名
        phoneNumber: "", // 联系方式
        carNumber: "", // 车牌号码
        carBrand: "", // 车辆品牌
        cardStartDate: "", // 有效时间开始
        cardEndDate: "", // 有效时间结束
        paymentAmount: "", // 支付金额
        paymentMethod: "", // 支付方式
      },
      carInfoRules: {
        personName: [
          { required: true, message: "请输入车主姓名", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "请输入车主联系方式", trigger: "blur" },
        ],
        carNumber: [
          { required: true, message: "请输入车牌号码", trigger: "blur" },
          { validator: validatearNumber, trigger: "blur" },
        ],
        carBrand: [
          { required: true, message: "请输入车辆品牌", trigger: "blur" },
        ],
        cardStartDate: [
          { required: true, message: "请输入有效时间开始", trigger: "blur" },
        ],
        cardEndDate: [
          { required: true, message: "请输入有效时间结束", trigger: "blur" },
        ],
        paymentAmount: [
          { required: true, message: "请输入支付金额", trigger: "blur" },
        ],
        paymentMethod: [
          { required: true, message: "请输入支付方式", trigger: "blur" },
        ],
      },
      // 支付方式
      payMethodList: [
        { id: "paymentMethod", name: "支付宝" },
        { id: "WeChat", name: "微信" },
        { id: "Cash", name: "线下" },
      ],
    };
  },
  // 缓存id
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  mounted() {
    // 调用详情回显接口
    if (this.id) {
      this.getCardDetail()
    }
  },
  methods: {
    // 确定
    submitForm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          if (this.id) {
            // 修改
            await updateCardAPI(this.form)
          }else {
            await createCardAPI(this.form);//新增
          }
          this.$message.success(`${this.id ? '更新成功':'新增成功'}`);
          this.$router.back();

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm() {},
    // 请求方法
    async getCardDetail() {
      const id = this.$route.query.id;
      const res = await getDetailAPI(id);
      const {
        personName,
        phoneNumber,
        carNumber,
        carBrand,
        cardStartDate,
        cardEndDate,
        paymentAmount,
        paymentMethod,
        carInfoId,
        rechargeId
      } = res.data;
      this.form = {
        personName,
        phoneNumber,
        carNumber,
        carBrand,
        cardStartDate,
        cardEndDate,
        paymentAmount,
        paymentMethod,
        carInfoId,
        rechargeId
      };
    },
  },
};
</script>

<style scoped>
.add-card-container {
  max-width: 1600px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 页面头部样式 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.back-button {
  color: #409eff;
  font-size: 16px;
  margin-right: 10px;
}
.header-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

/* 表单样式 */
.form-container {
  margin-bottom: 30px;
}
.form-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.form-row > .el-form-item {
  flex: 1;
}

/* 按钮样式 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 缴费信息样式 */
.latest-payment {
  padding: 20px;
  margin-top: 30px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.latest-payment h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.payment-details p {
  margin: 5px 0;
  line-height: 1.6;
}
</style>
